{% block sw_entity_many_to_many_assignment_card %}
<div
    class="sw-cms-product-assignment"
    v-bind="$attrs"
>
    {% block sw_cms_product_assignment_content %}
    <div class="sw-cms-product-assignment__select-container">
        {% block sw_cms_product_assignment_select %}
        <slot name="select">
            <sw-select-base
                v-bind="$attrs"
                ref="selectBase"
                class="sw-cms-product-assignment-select"
                :disabled="disabled"
                :label="selectLabel"
                :is-loading="isLoadingResults"
                @select-expanded="onSelectExpanded"
                @select-collapsed="onSelectCollapsed"
            >

                <template #sw-select-selection="{ identification, error, disabled, size, expand, collapse }">
                    {% block sw_cms_product_assignment_search_field %}
                    <input
                        ref="searchInput"
                        tabindex="-1"
                        :placeholder="placeholder"
                        :value="searchTerm"
                        :disabled="disabled"
                        @input="onSearchTermChange"
                    >
                    {% endblock %}
                </template>

                <template #results-list>
                    {% block sw_cms_product_assignment_results_list %}
                    <sw-select-result-list
                        ref="swSelectResultList"
                        :options="resultCollection"
                        :is-loading="isLoadingResults"
                        :empty-message="$tc('global.sw-entity-many-to-many-select.messageNoResults', { term: searchTerm }, 0)"
                        :focus-el="$refs.searchInput"
                        @paginate="paginateResult"
                        @item-select="onItemSelect"
                    >

                        {% block sw_cms_product_assignment_results_list_before %}
                        <template #before-item-list>
                            {% block sw_cms_product_assignment_results_list_before_content %}
                            <slot name="before-item-list"></slot>
                        {% endblock %}
                        </template>
                        {% endblock %}

                        {% block sw_cms_product_assignment_results_list_result %}
                        <template #result-item="{ item, index }">
                            {% block sw_cms_product_assignment_results_list_result_content %}
                            <slot
                                name="result-item"
                                v-bind="{ item, index, labelProperty, valueProperty: 'id', searchTerm, highlightSearchTerm, isSelected, onItemSelect, getKey }"
                            >

                                {% block sw_cms_product_assignment_results_list_list_item %}
                                <sw-select-result
                                    :selected="isSelected(item)"
                                    v-bind="{ item, index }"
                                    @item-select="onItemSelect"
                                >

                                    {% block sw_cms_product_assignment_results_list_list_item_label %}
                                    <slot
                                        name="result-label-property"
                                        v-bind="{ item, index, labelProperty, valueProperty: 'id', searchTerm, highlightSearchTerm, getKey }"
                                    >

                                        <sw-highlight-text
                                            v-if="highlightSearchTerm"
                                            :text="getKey(item, `translated.${labelProperty}`)"
                                            :search-term="searchTerm"
                                        />

                                        <template v-else>
                                            {{ getKey(item, `translated.${labelProperty}`) }}
                                        </template>
                                    </slot>
                                {% endblock %}
                                </sw-select-result>
                            {% endblock %}
                            </slot>
                        {% endblock %}
                        </template>
                        {% endblock %}

                        {% block sw_cms_product_assignment_results_list_after %}
                        <template #after-item-list>
                            {% block sw_cms_product_assignment_results_list_after_content %}
                            <slot name="after-item-list"></slot>
                        {% endblock %}
                        </template>
                    {% endblock %}
                    </sw-select-result-list>
                    {% endblock %}
                </template>
            </sw-select-base>
        </slot>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_cms_product_assignment_grid %}
    <sw-data-grid
        class="sw-cms-product-assignment__grid"
        :data-source="gridData"
        :is-loading="isLoadingGrid"
        :columns="columns"
        :v-bind="$attrs"
        :show-selection="false"
        :plain-appearance="true"
    >

        {% block sw_cms_product_assignment_grid_column %}
        <template
            v-for="column in columns"
            #[`column-${column.property}`]="columnProps"
        >
            {% block sw_cms_product_assignment_grid_column_content %}
            <slot
                :name="`column-${column.property}`"
                v-bind="{ ...columnProps, searchTerm, highlightSearchTerm }"
            ></slot>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_cms_product_assignment_grid_column_actions %}
        <template #actions="{ item }">
            {% block sw_cms_product_assignment_grid_column_actions_content %}
            <sw-context-menu-item
                variant="danger"
                :disabled="disabled"
                @click="removeFromGrid(item)"
            >
                {{ $tc('global.entity-components.labelRemoveAssociation') }}
            </sw-context-menu-item>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_cms_product_assignment_grid_footer %}
        <template #pagination>
            {% block sw_cms_product_assignment_grid_footer_content %}
            <sw-pagination
                v-if="total > 0"
                v-bind="{ limit, page, total }"
                :steps="steps"
                :auto-hide="false"
                @page-change="paginateGrid"
            />

            <div
                v-else
                class="sw-cms-product-assignment__empty-state"
            >
                <slot name="empty-state"></slot>
            </div>
            {% endblock %}
        </template>
        {% endblock %}
    </sw-data-grid>
    {% endblock %}
</div>
{% endblock %}
